<template>
  <div class="spring-autumn-page">
    <!-- 顶部背景图 -->
    <div class="season-banner">
      <img src="../assets/65.jpg" alt="春秋限定活动" class="banner-img">
      <div class="banner-overlay">
        <h1>春秋限定 · 母校情怀</h1>
        <p>重返校园时光，享受专属优惠</p>
      </div>
    </div>

    <!-- 活动倒计时 -->
    <div class="countdown-container">
      <div class="countdown-title">活动剩余时间</div>
      <div class="countdown">
        <div class="countdown-item">
          <span class="number">{{ days }}</span>
          <span class="label">天</span>
        </div>
        <div class="countdown-item">
          <span class="number">{{ hours }}</span>
          <span class="label">时</span>
        </div>
        <div class="countdown-item">
          <span class="number">{{ minutes }}</span>
          <span class="label">分</span>
        </div>
        <div class="countdown-item">
          <span class="number">{{ seconds }}</span>
          <span class="label">秒</span>
        </div>
      </div>
    </div>

    <!-- 母校行宣传 -->
    <section class="alumni-section">
      <div class="section-header">
        <h2>春秋母校行</h2>
        <div class="decoration-leaf left-leaf"></div>
        <div class="decoration-leaf right-leaf"></div>
      </div>
      <div class="alumni-content">
        <div class="alumni-text">
          <p>在这个充满回忆的季节，我们邀请您重返母校，重温青春岁月。</p>
          <p>春秋母校行活动特别为校友们准备了专属优惠，让您在怀念过去的同时，享受当下的美好。</p>
          <p>活动期间，凭校友证可享受额外折扣，更有机会获得限量版母校纪念品。</p>
          <button class="cta-button" @click="showAlumniModal = true">查看校友特权</button>
        </div>
        <div class="alumni-image">
          <img src="../assets/66.jpg" alt="母校记忆" @mouseover="toggleImageZoom" @mouseout="toggleImageZoom">
        </div>
      </div>
    </section>

    <!-- 优惠力度 -->
    <section class="discount-section">
      <h2>春秋专属优惠</h2>
      <div class="discount-cards">
        <div class="discount-card"
             v-for="(discount, index) in discounts"
             :key="index"
             @mouseenter="activeDiscount = index"
             @mouseleave="activeDiscount = null">
          <div class="discount-value" :class="{ 'active': activeDiscount === index }">
            {{ discount.value }}
          </div>
          <div class="discount-details">
            <h3>{{ discount.title }}</h3>
            <p>{{ discount.description }}</p>
            <div class="conditions" v-show="activeDiscount === index">
              <p>{{ discount.condition }}</p>
              <button class="apply-button">立即领取</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 主推活动 -->
    <section class="featured-section">
      <h2>春秋主推活动</h2>
      <div class="featured-tabs">
        <button
            v-for="(tab, index) in tabs"
            :key="index"
            @click="currentTab = index"
            :class="{ 'active': currentTab === index }"
        >
          {{ tab }}
        </button>
      </div>
      <div class="featured-content">
        <transition name="fade" mode="out-in">
          <div v-if="currentTab === 0" key="campus">
            <h3>校园怀旧之旅</h3>
            <div class="activity-grid">
              <div class="activity-card" v-for="(activity, index) in campusActivities" :key="index">
                <img :src="activity.image" :alt="activity.title">
                <div class="activity-info">
                  <h4>{{ activity.title }}</h4>
                  <p>{{ activity.description }}</p>
                  <span class="price">{{ activity.price }}</span>
                  <button class="book-button" @click="bookActivity(activity)">预约体验</button>
                </div>
              </div>
            </div>
          </div>
          <div v-else-if="currentTab === 1" key="food">
            <h3>母校美食重温</h3>
            <div class="food-carousel">
              <button class="carousel-button prev" @click="prevFood">❮</button>
              <div class="food-item" v-for="(item, index) in foodItems" :key="index" v-show="currentFood === index">
                <img :src="item.image" :alt="item.name">
                <div class="food-details">
                  <h4>{{ item.name }}</h4>
                  <p>{{ item.description }}</p>
                  <div class="food-price">
                    <span class="original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}</span>
                    <span class="current-price">¥{{ item.currentPrice }}</span>
                  </div>
                  <button class="order-button">立即下单</button>
                </div>
              </div>
              <button class="carousel-button next" @click="nextFood">❯</button>
            </div>
          </div>
          <div v-else key="gift">
            <h3>限量纪念品</h3>
            <div class="gift-list">
              <div class="gift-item" v-for="(gift, index) in gifts" :key="index">
                <div class="gift-image">
                  <img :src="gift.image" :alt="gift.name">
                  <div class="gift-tag" v-if="gift.limited">限量{{ gift.stock }}份</div>
                </div>
                <div class="gift-info">
                  <h4>{{ gift.name }}</h4>
                  <p>{{ gift.description }}</p>
                  <div class="gift-price">
                    <span>¥{{ gift.price }}</span>
                    <button class="add-to-cart" @click="addToCart(gift)">加入收藏</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </section>

    <!-- 校友特权模态框 -->
    <div class="modal-overlay" v-if="showAlumniModal" @click.self="showAlumniModal = false">
      <div class="alumni-modal">
        <button class="close-modal" @click="showAlumniModal = false">×</button>
        <h3>校友专属特权</h3>
        <ul class="privilege-list">
          <li v-for="(privilege, index) in alumniPrivileges" :key="index">
            <span class="privilege-icon">✓</span>
            {{ privilege }}
          </li>
        </ul>
        <div class="modal-actions">
          <button class="verify-button" @click="verifyAlumni">验证校友身份</button>
          <button class="share-button" @click="sharePrivileges">分享给校友</button>
        </div>
      </div>
    </div>

    <!-- 底部装饰 -->
    <div class="season-footer">
      <p>© 2023 春秋限定活动 · 重温母校情怀</p>
      <div class="footer-decoration">
        <span class="leaf"></span>
        <span class="leaf"></span>
        <span class="leaf"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import image56 from '../assets/56.jpg'
import image57 from '../assets/57.jpg'
import image58 from '../assets/58.jpg'
import image59 from '../assets/59.jpg'
import image60 from '../assets/60.jpg'
import image61 from '../assets/61.jpg'
import image62 from '../assets/62.jpg'
import image63 from '../assets/63.jpg'
import image64 from '../assets/64.jpg'

export default {
  setup() {
    // 倒计时逻辑
    const endDate = new Date();
    endDate.setDate(endDate.getDate() + 15); // 15天后结束

    const timeLeft = ref(calculateTimeLeft());
    const timer = ref(null);

    function calculateTimeLeft() {
      const now = new Date();
      const difference = endDate - now;

      if (difference <= 0) {
        return { days: 0, hours: 0, minutes: 0, seconds: 0 };
      }

      return {
        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
        minutes: Math.floor((difference / 1000 / 60) % 60),
        seconds: Math.floor((difference / 1000) % 60),
      };
    }

    onMounted(() => {
      timer.value = setInterval(() => {
        timeLeft.value = calculateTimeLeft();
      }, 1000);
    });

    onBeforeUnmount(() => {
      clearInterval(timer.value);
    });

    const days = computed(() => String(timeLeft.value.days).padStart(2, '0'));
    const hours = computed(() => String(timeLeft.value.hours).padStart(2, '0'));
    const minutes = computed(() => String(timeLeft.value.minutes).padStart(2, '0'));
    const seconds = computed(() => String(timeLeft.value.seconds).padStart(2, '0'));

    // 优惠信息
    const discounts = ref([
      {
        value: "5折",
        title: "校友专享折扣",
        description: "凭有效校友证件享受半价优惠",
        condition: "适用于所有校园内消费，每人限用一次"
      },
      {
        value: "满300减100",
        title: "春秋消费礼",
        description: "单笔消费满300元立减100元",
        condition: "适用于纪念品商店和特色餐饮"
      },
      {
        value: "赠品",
        title: "返校礼包",
        description: "活动期间返校即可获得精美礼品",
        condition: "每日限量100份，先到先得"
      }
    ]);

    const activeDiscount = ref(null);

    // 主推活动
    const tabs = ref(["校园怀旧之旅", "母校美食重温", "限量纪念品"]);
    const currentTab = ref(0);

    const campusActivities = ref([
      {
        title: "老教室体验课",
        description: "回到当年的教室，重温一堂经典课程",
        price: "¥99/人",
        image: image56
      },
      {
        title: "校园导览",
        description: "专业导游带您游览校园新老地标",
        price: "¥150/组",
        image: image57
      },
      {
        title: "宿舍夜话",
        description: "在学生宿舍体验一晚，找回当年感觉",
        price: "¥200/晚",
        image: image58
      }
    ]);

    const foodItems = ref([
      {
        name: "食堂经典套餐",
        description: "包含当年最受欢迎的几道菜式",
        originalPrice: "45",
        currentPrice: "30",
        image: image60
      },
      {
        name: "校门口小吃",
        description: "重现校门口最受欢迎的小摊美食",
        originalPrice: "60",
        currentPrice: "45",
        image: image63
      },
      {
        name: "毕业季蛋糕",
        description: "特别设计的母校主题毕业蛋糕",
        originalPrice: "199",
        currentPrice: "159",
        image: image64
      }
    ]);

    const currentFood = ref(0);

    function nextFood() {
      currentFood.value = (currentFood.value + 1) % foodItems.value.length;
    }

    function prevFood() {
      currentFood.value = (currentFood.value - 1 + foodItems.value.length) % foodItems.value.length;
    }

    const gifts = ref([
      {
        name: "校徽纪念章",
        description: "精致复刻版校徽，可佩戴收藏",
        price: "89",
        stock: 50,
        limited: true,
        image: image62
      },
      {
        name: "校园风景明信片",
        description: "一套12张校园四季风景明信片",
        price: "45",
        stock: 100,
        limited: true,
        image: image59
      },
      {
        name: "纪念T恤",
        description: "印有经典校训的纯棉T恤",
        price: "129",
        stock: 80,
        limited: true,
        image: image61
      }
    ]);

    // 校友特权
    const showAlumniModal = ref(false);
    const alumniPrivileges = ref([
      "所有消费享受额外9折优惠",
      "优先预约校园导览服务",
      "免费领取校友纪念册一本",
      "专属校友休息区使用权",
      "参与校友专属活动资格"
    ]);

    function verifyAlumni() {
      alert("校友身份验证功能即将开放，敬请期待！");
    }

    function sharePrivileges() {
      alert("分享功能即将开放！");
    }

    function bookActivity(activity) {
      alert(`已预约: ${activity.title}`);
    }

    function addToCart(gift) {
      alert(`已添加 ${gift.name} 到收藏`);
    }

    function toggleImageZoom(event) {
      event.target.classList.toggle('zoomed');
    }

    return {
      days,
      hours,
      minutes,
      seconds,
      discounts,
      activeDiscount,
      tabs,
      currentTab,
      campusActivities,
      foodItems,
      currentFood,
      nextFood,
      prevFood,
      gifts,
      showAlumniModal,
      alumniPrivileges,
      verifyAlumni,
      sharePrivileges,
      bookActivity,
      addToCart,
      toggleImageZoom
    };
  }
};
</script>

<style scoped>
.spring-autumn-page {
  font-family: 'Microsoft YaHei', sans-serif;
  color: #333;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  background-color: #f9f7f0;
}

/* 顶部横幅 */
.season-banner {
  position: relative;
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.banner-img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

.banner-img:hover {
  transform: scale(1.02);
}

.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 30px;
  text-align: center;
}

.banner-overlay h1 {
  margin: 0;
  font-size: 2.5rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.banner-overlay p {
  margin: 10px 0 0;
  font-size: 1.2rem;
}

/* 倒计时 */
.countdown-container {
  background-color: #8fb593;
  color: white;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 30px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.countdown-title {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.countdown {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-item .number {
  font-size: 2rem;
  font-weight: bold;
  background-color: white;
  color: #5a7d5a;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  margin-bottom: 5px;
}

.countdown-item .label {
  font-size: 0.9rem;
}

/* 母校行部分 */
.alumni-section {
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.section-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.section-header h2 {
  color: #5a7d5a;
  font-size: 1.8rem;
  margin: 0;
  display: inline-block;
  padding: 0 20px;
  background-color: white;
  position: relative;
  z-index: 1;
}

.decoration-leaf {
  position: absolute;
  width: 60px;
  height: 60px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%238fb593" d="M50 0 Q70 30 50 60 Q30 30 50 0" /></svg>');
  background-size: contain;
  top: 50%;
  transform: translateY(-50%);
}

.left-leaf {
  left: 20%;
}

.right-leaf {
  right: 20%;
  transform: translateY(-50%) scaleX(-1);
}

.alumni-content {
  display: flex;
  gap: 30px;
  align-items: center;
}

.alumni-text {
  flex: 1;
}

.alumni-text p {
  line-height: 1.6;
  margin-bottom: 15px;
}

.alumni-image {
  flex: 1;
}

.alumni-image img {
  width: 100%;
  border-radius: 8px;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.alumni-image img.zoomed {
  transform: scale(1.05);
}

.cta-button {
  background-color: #5a7d5a;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cta-button:hover {
  background-color: #3a5d3a;
}

/* 优惠部分 */
.discount-section {
  background-color: #f0e8d5;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 30px;
}

.discount-section h2 {
  color: #5a7d5a;
  text-align: center;
  margin-bottom: 30px;
}

.discount-cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.discount-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
}

.discount-card:hover {
  transform: translateY(-5px);
}

.discount-value {
  background-color: #8fb593;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  transition: background-color 0.3s;
}

.discount-value.active {
  background-color: #5a7d5a;
}

.discount-details {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.discount-details h3 {
  margin-top: 0;
  color: #5a7d5a;
}

.discount-details p {
  margin: 10px 0;
  line-height: 1.5;
}

.conditions {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px dashed #ddd;
}

.apply-button {
  background-color: #5a7d5a;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 10px;
  width: 100%;
  transition: background-color 0.3s;
}

.apply-button:hover {
  background-color: #3a5d3a;
}

/* 主推活动部分 */
.featured-section {
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.featured-section h2 {
  color: #5a7d5a;
  text-align: center;
  margin-bottom: 30px;
}

.featured-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  gap: 10px;
}

.featured-tabs button {
  background-color: #f0e8d5;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  color: #5a7d5a;
}

.featured-tabs button.active {
  background-color: #5a7d5a;
  color: white;
}

.featured-tabs button:hover:not(.active) {
  background-color: #d8d0b8;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.activity-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.activity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.activity-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.activity-info {
  padding: 15px;
}

.activity-info h4 {
  margin: 0 0 10px;
  color: #5a7d5a;
}

.activity-info p {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: #666;
}

.activity-info .price {
  display: block;
  font-weight: bold;
  color: #d05a5a;
  margin-bottom: 10px;
}

.book-button {
  background-color: #d05a5a;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s;
}

.book-button:hover {
  background-color: #b03a3a;
}

.food-carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.food-item {
  display: flex;
  gap: 20px;
  align-items: center;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  max-width: 600px;
}

.food-item img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.food-details {
  flex: 1;
}

.food-details h4 {
  margin-top: 0;
  color: #5a7d5a;
}

.food-price {
  margin-top: 15px;
}

.original-price {
  text-decoration: line-through;
  color: #999;
  margin-right: 10px;
}

.current-price {
  font-weight: bold;
  color: #d05a5a;
  font-size: 1.2rem;
}

.order-button {
  background-color: #5a7d5a;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 15px;
  transition: background-color 0.3s;
}

.order-button:hover {
  background-color: #3a5d3a;
}

.carousel-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #5a7d5a;
  cursor: pointer;
  padding: 5px 10px;
}

.carousel-button:hover {
  color: #3a5d3a;
}

.gift-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.gift-item {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s;
}

.gift-item:hover {
  transform: translateY(-5px);
}

.gift-image {
  position: relative;
}

.gift-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.gift-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #d05a5a;
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.gift-info {
  padding: 15px;
}

.gift-info h4 {
  margin: 0 0 10px;
  color: #5a7d5a;
}

.gift-info p {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: #666;
}

.gift-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gift-price span {
  font-weight: bold;
  color: #d05a5a;
}

.add-to-cart {
  background-color: #5a7d5a;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-to-cart:hover {
  background-color: #3a5d3a;
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.alumni-modal {
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.close-modal {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #999;
}

.alumni-modal h3 {
  color: #5a7d5a;
  margin-top: 0;
  text-align: center;
}

.privilege-list {
  list-style: none;
  padding: 0;
}

.privilege-list li {
  padding: 10px 0;
  border-bottom: 1px dashed #eee;
  display: flex;
  align-items: center;
}

.privilege-icon {
  color: #5a7d5a;
  font-weight: bold;
  margin-right: 10px;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
}

.verify-button, .share-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.verify-button {
  background-color: #5a7d5a;
  color: white;
}

.verify-button:hover {
  background-color: #3a5d3a;
}

.share-button {
  background-color: #f0e8d5;
  color: #5a7d5a;
}

.share-button:hover {
  background-color: #d8d0b8;
}

/* 底部 */
.season-footer {
  text-align: center;
  padding: 20px;
  color: #666;
  position: relative;
}

.footer-decoration {
  margin-top: 15px;
}

.footer-decoration .leaf {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%238fb593" d="M50 0 Q70 30 50 60 Q30 30 50 0" /></svg>');
  background-size: contain;
  margin: 0 5px;
}

.footer-decoration .leaf:nth-child(2) {
  transform: scaleX(-1);
}

.footer-decoration .leaf:nth-child(3) {
  transform: rotate(90deg);
}

/* 过渡动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

@media (max-width: 768px) {
  .alumni-content {
    flex-direction: column;
  }

  .food-item {
    flex-direction: column;
  }

  .food-item img {
    width: 100%;
  }

  .discount-cards {
    flex-direction: column;
    align-items: center;
  }

  .discount-card {
    width: 100%;
  }
}
</style>